<template>
  <div>
    <div>我是组件</div>
    子组件city： {{ citys }} <br>
    子组件page：{{ page }} <br>
    子组件修改后city：{{ changeCity }}
    <div v-if="flag" class="sun" @click="handerClick">显示input</div>
    <input v-else ref="inputRef" class="yuelaing" />
    <button @click="changeCity">修改city</button>
    <button @click="changePage">修改page</button>
    <button @click="handlerChange">page修改父级数据</button>
    <button @click="sendflag">将flag传给父级</button>
  </div>
</template>
<script>
export default {
  props: ['citys', 'page'],
  data() {
    return {
      flag: true,
      age:18,
    }
  },
  methods: {
    handerClick() {
      this.flag = false
      // this.$refs.inputRef.focus();  //   视图还没有更新  所以会报错
      this.$nextTick(() => {
        this.$refs.inputRef.focus()
      })
    },
    changePage(){
        this.page++
    },
    handlerChange(){
        this.$emit('update:page',5)
    },
    sendflag(){
        this.$emit('sendflag',this.flag)
    }
  },
  computed: {
    changeCity() {
      return this.citys + '1'
    }
  },
  mounted(){
      console.log(this.$attrs);
      console.log('父级的city:',this.$parent.city);
      this.$bus.$on("sendCity",data=>{
          console.log(data);
      })
  }
}
</script>
